<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿文博客之家</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<h3>site : {{site}}</h3>
			<h3>url : {{url}}</h3>
			<h3>Alexa : {{alexa}}</h3>
		</div>
		<script type="text/javascript">
			// 我们的数据对象
			var data = {
				site: "菜鸟教程",
				url: "https://blog.csdn.net/lwzhang1101",
				alexa: 10000
			}
			var vm = new Vue({
				el: '#vue_det',
				data: data
			})
			// 它们引用相同的对象！
			document.write(vm.site === data.site) // true
			document.write("<br>")
			// 设置属性也会影响到原始数据
			vm.site = "Runoob"
			document.write(data.site + "<br>") // Runoob

			// ……反之亦然
			data.alexa = 1234
			document.write(vm.alexa) // 1234
			document.write("<br>")
			//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
			document.write(vm.$data === data) // true
			document.write("<br>") 
			document.write(vm.$el === document.getElementById('vue_det')) // true
		</script>
	</body>
</html>
